<template>
	<view class="f-navbar">
		<!-- :style="[navbarType == 1 ? { height: systemInfo.navBarH + 'px' } : { paddingTop: systemInfo.statusBarHeight + 'px' }]" -->
		<view :class="[navbarType == 1 ? 'f-relative' : 'f-fixed']">
			<!-- 背景色 -->
			<view
				class="bgColor"
				:style="{
					height: systemInfo.navBarH + 'px',
					background: bgColor,
					backgroundImage: gradient,
					opacity: navbarType == 5 ? transparentValue : ''
				}"
			></view>
			<view class="u-flex content" :style="{ height: systemInfo.titleBarHeight + 'px', top: systemInfo.statusBarHeight + 'px' }">
				<block v-if="navbarType != 4 && isShowLeft">
					<view class="u-flex left" hover-class="left--hover" hover-start-time="150" v-if="navbarType == 3">
						<view class="u-flex u-home-arrow-left" :style="{ borderColor: isWhite ? 'rgba(255,255,255,.5)' : '#E9E9E9', padding: showHomeIcon ? '' : 0 }">
							<view @click="onBack" class="uniBox backBox" v-if="isBack"><uni-icons type="back" size="19" :color="[leftColor]"></uni-icons></view>
							<view @click="onHome" class="uniBox homeBox" v-if="showHomeIcon"><uni-icons type="home-filled" size="20" :color="[leftColor]"></uni-icons></view>
						</view>
					</view>
					<view class="u-flex left" hover-class="left--hover" hover-start-time="150" @click="leftClick" v-else>
						<slot name="left">
							<!-- <u-icon :name="iconLeft" size="19" :color="leftColor"></u-icon> -->
							<uni-icons type="back" size="19" :color="[leftColor]"></uni-icons>
							<text v-if="leftText" class="left__text" :style="{ color: leftColor }">{{ leftText }}</text>
						</slot>
					</view>
				</block>
				<view class="center" :style="{ width: titleWidth + 'rpx' }">
					<slot name="default">
						<view
							class="title u-line-1"
							:style="[
								isShowTransparentTitle ? {} : { opacity: navbarType == 5 ? transparentValue : '' },
								{ color: fontColor, width: titleWidth + 'rpx', fontSize: fontSize + 'rpx' }
							]"
						>
							{{ title }}
						</view>
					</slot>
				</view>
				<view class="u-flex right" @click="rightClick"><slot name="right"></slot></view>
			</view>
		</view>
		<!-- 防止塌陷高度 -->
		<view v-if="isFillHeight && navbarType != 5 && navbarType != 1" :style="{ height: systemInfo.navBarH + 'px' }"></view>
		<tui-modal :show="confirmModal" title="提示" content="确定离开当前页面吗？" @click="modalClick"></tui-modal>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import tuiModal from '@/components/thorui/tui-modal/tui-modal.vue';

// 主页页面的页面路径
// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
const mainPagePath = ['pages/goods/goods', 'pages/homepage/homepage'];
//返回首页的地址
const homePath = '/pages/activity/activity';
//白色表达值
const whiteList = ['#FFF', '#fff', '#FFFFFF', '#ffffff', 'white', 'rgb(255,255,255)', 'rgba(255,255,255,1)'];
// import base from '@/config/baseUrl.js';
export default {
	name: 'f-navbar',
	components: {
		uniIcons,
		tuiModal
	},
	props: {
		title: {
			type: String
		},
		// navbarType等于5透明背景时title是否显示
		isShowTransparentTitle: {
			type: Boolean,
			default: function() {
				return true;
			}
		},
		leftText: {
			type: String
		},
		bgColor: {
			type: String,
			default: '#fff'
		},
		// 导航状态 0、默认固定在顶部 1、不固定在顶部 2、自定义点击事件 3、同时显示箭头和去首页按钮 4、不显示左侧内容 5、上拉渐变显示背景色
		navbarType: {
			type: [String, Number],
			default: 0
		},
		// 是否显示左侧内容
		isShowLeft: {
			type: Boolean,
			default: function() {
				return true;
			}
		},
		// 左边按钮icon
		leftIcon: {
			type: String,
			default: 'arrow-left'
		},
		// 左边icon颜色
		leftIconColor: {
			type: String,
			default: '#333333'
		},
		// 屏幕滑动距离顶部距离(透明固定导航比传)
		scrollTop: {
			type: Number,
			default: 0
		},
		//导航字体颜色，字体颜色为白色的时候会把手机状态栏设置为白色，否则为黑色
		fontColor: {
			type: String,
			default: '#303133'
		},
		titleWidth: {
			type: [String, Number],
			default: 400
		},
		fontSize: {
			type: [String, Number],
			default: 34
		},
		gradient: {
			type: String
		},
		// 是否设置防止塌陷高度
		isFillHeight: {
			type: Boolean,
			default: function() {
				return true;
			}
		},
		// 是否显示返回按钮
		isBack: {
			type: Boolean,
			default: false
		},
		// 确认返回提示弹框
		confirmReturn: {
			type: Boolean,
			default: false
		},
		showHomeIcon: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			// systemInfo:base.systemInfo,
			systemInfo: {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// #ifdef MP-ALIPAY
				navBarH: uni.getSystemInfoSync().statusBarHeight + uni.getSystemInfoSync().titleBarHeight, //菜单栏总高度--单位px
				titleBarHeight: uni.getSystemInfoSync().titleBarHeight, //标题栏高度--单位px
				// #endif
				// #ifndef MP-ALIPAY
				navBarH: uni.getSystemInfoSync().statusBarHeight + 44, //菜单栏总高度--单位px
				titleBarHeight: 44 //标题栏高度--单位px
				// #endif
			},
			//当前页面是否是第一个页面
			firstPage: false,
			//透明度值
			transparentValue: 0,
			iconLeft: 'arrow-left', //左边icon
			// 上次显示的导航栏颜色
			lastFrontColor: '',
			//字体色
			navFontColor: '#303133',
			isWhite: false, //是否白色

			confirmModal: false, //弹框显隐
			clicktext: ''
		};
	},
	watch: {
		leftIcon: {
			immediate: true,
			handler(val) {
				this.iconLeft = val;
			}
		},
		fontColor: {
			immediate: true,
			handler(val) {
				this.navFontColor = val;
				this.settingColor();
			}
		},
		navbarType: {
			immediate: true,
			handler(val) {
				// console.log(val, 'navbarType');
				if (val == 5) {
					if (this.scrollTop > 180) {
						this.transparentValue = 1;
					} else {
						this.transparentValue = this.scrollTop / 180;
					}
				}
			}
		},
		scrollTop(val) {
			this.pageScroll({
				scrollTop: val
			});
		}
	},

	computed: {
		leftColor() {
			let color = '#303133';
			if (this.leftIconColor == '#303133') {
				//如果等于默认值
				// 背景不是白色或者背景是渐变色
				if (!whiteList.includes(this.bgColor) || this.gradient) {
					color = '#fff';
				}
			} else {
				color = this.leftIconColor;
			}
			return color;
		}
	},
	created() {
		this.pageScroll({
			scrollTop: this.scrollTop
		});
		//获取所有页面
		// let currentPages = getCurrentPages();
		// let pageLen = currentPages.length;
		// console.log('currentPages====', currentPages);

		//判断是否是第一个页面，如果是有设置back为true的页面，将不显示返回箭头，而显示返回首页按钮
		// if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
		// 	this.firstPage = true;
		// 	this.iconLeft = 'home';
		// }
	},

	methods: {
		onBack() {
			uni.navigateBack({ delta: 1 });
			// 确认返回
			// this.clicktext = 'onBack';
			// if (this.confirmReturn) {
			// 	this.confirmModal = true;
			// } else {
			// 	let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			// 	let curRoute = routes[routes.length - 1].route; //获取当前页面路由
			// 		uni.navigateBack({delta: 1});
			// 	// if (curRoute.includes('pages/activity/scoreDetail')) {
			// 	// 	uni.reLaunch({
			// 	// 		url: homePath
			// 	// 	});
			// 	// } else {
			// 	// 	uni.navigateBack();
			// 	// }
			// }
		},
		onHome() {
			this.clicktext = 'onHome';
			if (this.confirmReturn) {
				this.confirmModal = true;
			} else {
				uni.reLaunch({
					url: homePath
				});
			}
		},
		modalClick(val) {
			if (val.index == 1) {
				if (this.clicktext == 'onHome') {
					uni.reLaunch({
						url: homePath
					});
				} else if (this.clicktext == 'onBack') {
					uni.navigateBack();
				}
			}
			this.confirmModal = false;
		},
		leftClick() {
			if (this.navbarType == 2) {
				this.$emit('leftClick');
			} else {
				this.onBack();
			}
		},
		rightClick() {
			this.$emit('rightClick');
		},
		pageScroll(e) {
			if (this.navbarType == 5) {
				if (e.scrollTop && e.scrollTop > 0) {
					if (e.scrollTop > 180) {
						this.transparentValue = 1;
					} else {
						this.transparentValue = e.scrollTop / 180;
					}
				} else {
					this.transparentValue = 0;
				}
				// this.settingColor();
			}
		},
		//设置手机状态栏颜色
		settingColor() {
			let navColor = this.navFontColor;
			// console.log(navColor, 'settingColor');
			let frontColor = '#000000';
			if (whiteList.includes(navColor)) {
				frontColor = '#ffffff';
				this.isWhite = true;
			}
			if (this.lastFrontColor == frontColor) {
				return;
			}
			setTimeout(() => {
				this.lastFrontColor = frontColor;
				// 改变手机状态栏颜色
				// #ifndef MP-ALIPAY
				uni.setNavigationBarColor({
					frontColor: frontColor,
					backgroundColor: '#FFFFFF'
				});
				// #endif
				// #ifdef MP-ALIPAY
				uni.setNavigationBarColor({
					backgroundColor: frontColor == '#000000' ? '#ffffff' : '#000000'
				});
				// #endif
			}, 150);
		}
	}
};
</script>

<style scoped lang="scss">
.u-flex {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	.u-home-arrow-left {
		background-color: #fff;
	}
	.uniBox {
		padding: 0 10rpx;
		// height: 25px;
		// line-height: 25px;

		&.backBox {
			border-right: 1px solid #e9e9e9;
		}
	}
	// .homeBox {
	// 	padding-left: 10rpx;
	// }
}
.f-navbar {
	width: 750rpx;
	// .f-fixed {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	z-index: 1000;
	// }
	.f-relative {
		position: relative;
	}
	.bgColor {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;

		.left {
			height: 24px;
			line-height: 24px;
			margin: auto 0;
		}
	}
	.title {
		text-align: center;
		color: #303133;
	}
	.center {
		margin: 0 auto;
	}
	.left,
	.right {
		padding: 0 24rpx;
		position: absolute;
		top: 0;
		bottom: 0;
	}
	.left {
		left: 0;
		&--hover {
			opacity: 0.7;
		}
		&__text {
			font-size: 30rpx;
			margin-left: 3px;
		}
	}
	.right {
		right: 0;
	}
	.u-home-arrow-left {
		justify-content: space-between;
		border-radius: 100px;
		padding: 6rpx 14rpx;
		opacity: 0.8;
		border: 0.5px solid #dadbde;
	}
}
</style>
